<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>读写本地图片并展示</title>
</head>

<body>
  <div>
    <input type="file" id="files" style="display: none" onchange="fileImport();">
    <input type="button" id="fileImport" value="导入">
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    //点击导入按钮,使files触发点击事件,然后完成读取文件的操作
    $("#fileImport").click(function () {
      $("#files").click();
    })
    function fileImport() {
      //获取读取我文件的File对象
      var selectedFile = document.getElementById('files').files[0];
      var name = selectedFile.name;//读取选中文件的文件名
      var size = selectedFile.size;//读取选中文件的大小
      console.log("文件名:" + name + "大小:" + size);
      
      // 读取一个图片并展示到页面上
      const reader = new FileReader();
      reader.readAsDataURL(selectedFile);
      reader.onload = function fileReadCompleted() {
        const img = new Image();
        img.src = reader.result;
        console.log(reader.result);
        document.body.appendChild(img);
      };
    }
  </script>
</body>

</html>